<template>
  <div class="flex flexColumn flex1">
    <div class="title">
      <span>首页 &gt; 销售统计 &gt; 订单统计 </span>
    </div>
    <div class="main flex flexColumn">
      <div class="main-title">订单统计</div>

      <div class="flex orderstatistics-input">
        <span>订单号</span
        ><el-input
          placeholder="订单号"
          v-model="orderNo"
          clearable
          style="width: 230px"
        >
        </el-input>
        <span>收货人</span>
        <el-input
          placeholder="收货人"
          v-model="consignee"
          clearable
          style="width: 230px"
        >
        </el-input>
        <span>手机号</span>
        <el-input
          placeholder="手机号"
          v-model="phone"
          clearable
          style="width: 230px"
        >
        </el-input>
        <span>订单状态</span>
        <el-input
          placeholder="订单状态"
          v-model="orderState"
          clearable
          style="width: 230px"
        >
        </el-input>
      </div>
      <div class="flex orderstatistics-timer">
        <div>选择时间</div>
        <div class="block">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <el-button style="height: 40px" type="goon" @click="reOrderList"
          >查询</el-button
        >
      </div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column fixed prop="orderNo" label="订单号" width="100">
        </el-table-column>
        <el-table-column prop="orderTime" label="订单日期" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="电话号码" width="120">
        </el-table-column>
        <el-table-column prop="consignee" label="接收人" width="120">
        </el-table-column>
        <el-table-column prop="deliverAddress" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="orderTime" label="接收时间" width="120">
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="orderAmount" label="备注" width="120">
        </el-table-column>
        <el-table-column prop="orderState" label="订单状态" width="120">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="detail(scope.row.id)"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row.id)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="orderstatistics-page">
        <el-pagination
          @current-change="pageFn"
          @size-change="changeSize"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-drawer title="订单详情" :visible.sync="drawer" direction="ltr">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ obj.orderNo }}</span>
        </div>
        <div v-for="(item, key) in obj" :key="key" class="text item flex">
          <div class="orderdetail-left">{{ key }}</div>
          <div>{{ item }}</div>
        </div>
      </el-card>
    </el-drawer>

    <el-drawer
      title="修改商品"
      :visible.sync="dialog"
      direction="ttb"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content">
        <el-form label-width="80px" class="flex flexColumn from">
          <div class="flex">
            <el-form-item label="订单号">
              <el-input v-model="obj.orderNo" clearable=""></el-input>
            </el-form-item>

            <el-date-picker
              v-model="editdate"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="margin-left: 20px; margin-bottom: 20px"
            >
            </el-date-picker>

            <el-form-item label="电话">
              <el-input v-model="obj.phone" clearable=""></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="obj.remarks"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="收件人">
              <el-input v-model="obj.consignee" clearable=""></el-input>
            </el-form-item>
            <el-form-item label="接收地址">
              <el-input v-model="obj.deliverAddress" clearable=""></el-input>
            </el-form-item>

            <div class="flex" style="margin: 0">
              <p>金额</p>
              <el-input-number
                v-model="obj.orderAmount"
                :min="1"
                label="描述文字"
              ></el-input-number>
            </div>
            <div class="flex">
              <p>订单状态</p>
              <el-select v-model="obj.orderState" placeholder="请选择">
                <el-option label="已完成" value="已完成"> 已完成</el-option>
                <el-option label="未完成" value="未完成"> 未完成 </el-option>
              </el-select>
            </div>
          </div>
        </el-form>
        <div
          class="demo-drawer__footer"
          style="padding-left: 20px; padding-top: 20px"
        >
          <el-button type="light" @click="cancelForm">取 消</el-button>
          <el-button type="goon" @click="edit" :loading="loading">{{
            loading ? "提交中 ..." : "确 定"
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { orderlist, orderdetail, orderedit } from "@/apis/order.js";
import { getYYYYMMDDHHMMSS } from "@/utlis/utils.js";
export default {
  data() {
    return {
      list: [],
      obj: {},
      currentPage: 1,
      pageSize: 5,
      total: 0,
      orderNo: "",
      phone: "",
      consignee: "",
      orderState: "",
      date: [],
      drawer: false,
      dialog: false,
      loading: false,
      editdate: [],
    };
  },
  created() {
    this.reOrderList();
  },
  methods: {
    pageFn(page) {
      this.currentPage = page;
      this.reOrderList();
    },
    changeSize(size) {
      this.pageSize = size;
      this.reOrderList();
    },
    reOrderList() {
      let {
        currentPage,
        pageSize,
        orderNo,
        consignee,
        phone,
        orderState,
        date,
      } = this;
      let searchDate =
        date.length === 0
          ? []
          : JSON.stringify([
              getYYYYMMDDHHMMSS(date[0]),
              getYYYYMMDDHHMMSS(date[1]),
            ]);
      orderlist({
        currentPage,
        pageSize,
        orderNo,
        consignee,
        phone,
        orderState,
        date: searchDate,
      }).then((res) => {
        for (let obj of res.data.data) {
          obj.orderTime = getYYYYMMDDHHMMSS(obj.orderTime);
          obj.deliveryTime = getYYYYMMDDHHMMSS(obj.deliveryTime);
        }
        this.currentPage = 1;
        this.pageSize = 5;
        this.orderNo = "";
        this.consignee = "";
        this.phone = "";
        this.orderState;
        this.date = [];
        this.list = res.data.data;
        this.total = res.data.total;
      });
    },
    getdetail(id) {
      orderdetail({ id: id }).then((res) => {
        if (res.status == 200) {
          this.editdate = [];
          let obj = JSON.parse(JSON.stringify(res.data.data));
          this.obj = obj;
          this.editdate.push(this.obj.orderTime);
          this.editdate.push(this.obj.deliveryTime);
        }
      });
    },
    edit() {
      orderedit({
        id: this.id,
        orderNo: this.obj.orderNo,
        orderTime: getYYYYMMDDHHMMSS(this.editdate[0]),
        phone: this.obj.phone,
        consignee: this.obj.consignee,
        deliverAddress: this.obj.deliverAddress,
        deliveryTime: getYYYYMMDDHHMMSS(this.editdate[1]),
        remarks: this.obj.remarks,
        orderAmount: this.obj.orderAmount,
        orderState: this.obj.orderState,
      }).then((res) => {
        if (res.data.code == 0) {
          this.reOrderList();
          this.loading = false;
          this.$message({
            type: "success",
            message:
              "优选管理系统提示:" + this.obj.orderNo + "商品信息修改成功!",
          });
          this.dialog = false;
        }
      });
    },

    detail(id) {
      this.getdetail(id);
      this.drawer = true;
    },
    handleEdit(id) {
      (this.dialog = true), (this.id = id);
      this.getdetail(id);
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .orderstatistics-input {
    span {
      width: 80px;
      font-size: 14px;
      line-height: 40px;
      padding-left: 10px;
    }
  }
  .orderstatistics-timer {
    margin-top: 20px;
    div {
      font-size: 14px;
      line-height: 40px;
      margin-right: 10px;
      margin-bottom: 20px;
    }
  }
  .orderstatistics-page {
    margin-top: 40px;
  }
}
.orderdetail-left {
  width: 100px;
  text-align: right;
  padding-right: 20px;
}
p {
  font-size: 14px;
  color: #606266;
  padding-right: 12px;
  line-height: 40px;
  padding-left: 12px;
}
.el-button--goon {
  color: #fff;
  background-color: #706c61;
  border-color: #706c61;
}
.el-button--light {
  color: #706c61;
  background-color: #e1f4f3;
  border-color: #e1f4f3;
}
</style>